<template>
    <div class="m-content">
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="logo">
            <router-link to="/blogs" class="el-link">
              <img width="100%" src="../assets/imgs/logo.jpg" alt="">
            </router-link>
          </div>
          <h3 class="title">欢迎来到博客世界</h3>
          <el-dropdown>
            <i class="el-icon-setting"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/blog/add">添加文章</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/chat">聊天室</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/me">关于</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/cache">服务器监测</router-link>
              </el-dropdown-item>
              <el-dropdown-item  @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-show="hasLogin">{{ user.username }}</span>
          <span v-show="!hasLogin">
            <router-link to="/login">登陆</router-link>
          </span>
          <el-avatar class="avatar" :src="user.avatar"></el-avatar>
        </el-header>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Header",
        data() {
            return {
                hasLogin: false,
                user: {
                    username: '请先登录',
                    avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                },
                blogs: {},
                currentPage: 1,
                total: 0
            }
        },
        methods: {
            logout() {
              console.log(11);
              const _this = this
                this.$axios.get('/api/logout', {
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                }).then((res) => {
                    _this.$store.commit('REMOVE_INFO')
                    _this.$router.push('/login')
                });
            }
        },
        created() {
            if (this.$store.state.userInfo) {
                this.user.username = this.$store.state.userInfo.username
                this.user.avatar = "/api"+this.$store.state.userInfo.avatar
                this.hasLogin = true
            }
        }
    }
</script>

<style scoped>
  @keyframes bounce {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(10%);
    }
  }
    .logo {
      overflow: hidden;
      border-radius: 1px;
      animation: bounce 1s alternate infinite;
      float: left;
      height: 80%;
      width: 50px;
      text-align: center;
    }
    .title {
      float: left;
      margin-left: 5%;
      font-size: 20px;
      color: #fff;
    }
    .avatar {
      margin-left: 5px;
      transform: translateY(20%);
    }
    .el-link {

    }
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
    .el-aside {
      color: #333;
    }

</style>
